import React from 'react';
import { Layout, Icon, BackTop, Breadcrumb } from 'antd';
import styles from './Main.css'
const { Content } = Layout;
const BreadcrumbItem = Breadcrumb.Item
function breadcrumbItemMap(props){
    const { location, userinfo } = props;
    const { pathNameList } = userinfo
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const extraBreadcrumbItems = pathSnippets.map((item, index) => {
        let newBreadcrumbItems = {}
        pathNameList.forEach(element=>{
            let path = element.path.replace(/\/+/g,"")
            if(path === item){
                newBreadcrumbItems.icon = element.icon
                newBreadcrumbItems.name = element.name
            }
        })
        const {icon,name} = newBreadcrumbItems
        return (
        <BreadcrumbItem key={index}>
            <Icon type={icon} />
            <span>{name}</span>
        </BreadcrumbItem>
        );
    })
    return extraBreadcrumbItems
}
export default class MainContent extends React.PureComponent {
    
    render() {
        return (
            <Content className={styles.mainContent} id="primaryLayout">
                <Breadcrumb style={{marginBottom:20}}>
                    {breadcrumbItemMap(this.props)}
                </Breadcrumb>
                <div className={styles.mainContentInner}>
                    {this.props.children}
                </div>
                <BackTop
                    visibilityHeight={300}
                    target={() => document.querySelector('#primaryLayout')}
                    style={{ right: 50 }}>
                    <div className={styles.backTop}>UP</div>
                </BackTop>
            </Content>
        );
    }
}